/* Author: Alexander Tripes

*/

document.documentElement.className += ' js_active';
/* end dom flickering =) */

jQuery.noConflict();

jQuery(document).ready(function()
{	
	//if (jQuery('#single_active')) {
	//	resize_image_to_fit();
	//} else{
	//	resize_images_to_fit();
	//};
	show_information();
	preload_all_images();
	//fetch_image();
});

// prevent thumb execution, load image with js
function fetch_image(){
	// Get some vars
	var atag = jQuery('.thumb_link');
	var art_container = jQuery('#art_container');
	
	// Bind the click event for the thumbnail
	atag.bind('click', function (event) {
		event.preventDefault();
		
		var current_img = jQuery('.single_active');
		var current_width = current_img.width();
		var current_src = current_img.attr('src');

		// Set the artworks width to the current image width, so
		// we can make the images position abolute, without the other
		// content to snap
		console.log('The current images width attribute is: '+current_width);
		art_container.css({
			width: current_img.attr('width')
		});
		
		// now set the images to position absolute
		current_img.css('position', 'asbolute');
		
		// get the filename of the image we want to load
		var imgToLoad = jQuery(this).attr('href');
		
		// extract only the valuable filename
		imgToLoad = imgToLoad.split('=');
		
		// Get the path of the old image and extract the image path from it
		var new_path_array = current_img.attr('src').split('/');
		var new_path = "";
		for (var i=0; i < new_path_array.length - 1; i++) {
		  new_path += new_path_array[i]+"/";
		};
		
		// make a copy of the current img, place it underneath and hide it.
		var new_image = jQuery('<img />');
		
		new_image
			.attr('src', new_path+imgToLoad[1])
			// hide image and set variables
			.css({
				position: 'asbolute',
				top: '0px',
				right: '0px'
			})
			.hide()
			.appendTo(art_container)
			.addClass('single_active');
			
		// Animate the current artwork spaces width to fit new image
		//art_container.css({
		//	width: new_image.attr('width')
		//});
		
		// Fade Out old image and fade in new
		current_img.fadeOut(400, function(){
			jQuery(this).remove();
		});
		
		new_image
			.load(function(){
				jQuery(this).fadeIn(400)
			});
	});
}

//preload all images
function preload_all_images(){
	console.log('i love u too');
	var img = jQuery('.single_active');
	
	img.css('opacity', '0');
	img.load(function(){
		jQuery(this).animate({
			opacity: 1
			}, 400);
	});
}


// Get information tag right
function show_information(){
	// console.log('i love u too');
	
	// store variables
	var genre_desc = jQuery('#genre_desc');
	var art_cont = jQuery('#art_container');
	var blur_rect = jQuery('#blur_cover');
	var button = jQuery('#information_button');
	var current_img = jQuery(".single_active");
	
	if (genre_desc.text()) {
		// console.log(genre_desc.text());
		
		button.css({
			'visibility':'visible',
			'display' : 'block'
		});
		// Get width and height of art_cont
		var cont_width = current_img.width();
		var cont_height = current_img.height();
		// console.log('height is '+art_cont_width+' and '+art_cont_height);
		
		// Set size of blur rect
		blur_rect.css('width', cont_width);
		blur_rect.css('height', cont_height);
		console.log(cont_width);
		
		// Set z-indezes
		genre_desc.css('z-index', '2');
		blur_rect.css('z-index', '1');
		
		// Store the hover
		button.bind('mouseenter', function(){
			// console.log('there was a mouseenter! i saw it!');
			genre_desc.stop(true, true).fadeIn(200);
			blur_rect.stop(true, true).fadeIn(200);
		});
	
		button.bind('mouseleave', function(){
			// console.log('there was a mouseenter! i saw it!');
			genre_desc.stop(true, true).fadeOut(200);
			blur_rect.stop(true, true).fadeOut(200);
		});
	}
	
	
}


// Resize imgages to fit viewport
function resize_image_to_fit()
{
	// store imporatent layout divs widths to calculat max
	// image size with them
	var leftbar_width = jQuery("#left_bar").width();
	var sidebar_width = jQuery("#sidebar").width();
	
    var img = jQuery("#single_active");
	var pic_real_width, pic_real_height;
	
	var viewport_width = jQuery(document).width();
	var viewport_height = jQuery(document).height();
	
	// console.log('Viewport width = '+viewport_width+'\nViewport height = '+viewport_height);
	
	var new_img = jQuery('<img />');
	
	new_img
	.attr("src", jQuery(img).attr("src"))
	.load(function() {
		pic_real_width = this.width;
		pic_real_height = this.height;
		// console.log('Real width = '+pic_real_width+'\nReal height = '+pic_real_height);
	});
	
	// Set allowed width for active image
	var allowed_width = viewport_width-leftbar_width-sidebar_width-200;
	
	jQuery(img).load(function(){
		// console.log('Active image loaded\nActual width = '+img.width()+'\nAcutal height = '+img.height());
		if (img.width() > allowed_width) {
			// Set ratio for height
			var ratio = allowed_width / img.width();
			// Calculate new height 
			var according_height = Math.round(img.height * ratio);
			// console.log('Image width exceeds allowed width ('+allowed_width+')');
			jQuery(this).attr('width', allowed_width);
			jQuery(this).attr('height', according_height);
		} else if (img.height() > viewport_height){
			jQuery(this).maxSize({
				height: allowed_height
			});
		}
	});
	
}

function resize_images_to_fit(){
	
}
